<template>
    <a-row>
        <a-col :span="6" style="text-align: center;">
            <a-input-search
                    style="margin-bottom: 8px; max-width: 240px"
                    v-model="searchKey.value"
            />
            <a-tree
                    v-if="departments.length"
                    :data="departments"
                    :default-expand-all="true"
            >
                <template #title="dep">
                    <template v-if="index=getMatchIndex(dep?.title),index<0">
                        {{dep?.title}}
                    </template>
                    <span v-else>
                {{dep?.title?.substr(0,index)}}
                <span style="color:var(--color-primary-light-4)">
                    {{dep?.title?.substr(index,searchKey.value.length)}}
                </span>
                {{dep?.title?.substr(index+searchKey.value.length)}}
            </span>
                </template>
                <template #extra="dep">
                    <IconPlus
                            style="position: absolute; right: 24px; font-size: 12px; top: 10px; color: #3370ff;"
                            @click="() => onIconAddClick(dep)"
                    />
                    <IconMinus v-if="!dep?.children||dep?.children?.length===0"
                               style="position: absolute; right: 0px; font-size: 12px; top: 10px; color: #3370ff;"
                               @click="() => onIconDelClick(dep)"
                    />
                </template>
            </a-tree>
        </a-col>
    </a-row>
    <a-modal :visible="addModal.open" title="添加部门" width="50%"
             @cancel="addModal.open=false" :footer="false"
    >
        <DepForm type="add" :parentDep="addModal.parentDep"
                 @success="getAllDepartments(),addModal.open=false" @cancel="addModal.open=false"
        ></DepForm>
    </a-modal>
    <DWM :open="delModal.open" :name="delModal.dep.name"
         @ok="delDep" @cancel="delModal.open=false"></DWM>
</template>

<script>
    import {IconPlus, IconMinus} from '@arco-design/web-vue/es/icon'
    import DepForm from './components/DepForm'
    import DWM from '../../../components/common/DelWarnModal'

    export default {
        name: "",
        components: {IconPlus, IconMinus, DepForm, DWM},
        data() {
            return {
                searchKey: {
                    value: ''
                },
                originalDepartments: [],
                addModal: {
                    open: false,
                    parentDep: {}
                },
                delModal: {
                    open: false,
                    dep: {}
                }
            }
        },
        computed: {
            departments() {
                if (!this.searchKey.value) return this.originalDepartments;
                return this.searchData(this.searchKey.value);
            }
        },
        methods: {
            getAllDepartments() {
                this.$get(this.requestUrl.getAllDepartments.url).then(res => {
                    this.originalDepartments = res.obj
                })
            },
            searchData(keyword) {
                const loop = (data) => {
                    const result = []
                    data.forEach(item => {
                        if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
                            result.push({...item})
                        } else if (item.children) {
                            const filterData = loop(item.children)
                            if (filterData.length) {
                                result.push({
                                    ...item,
                                    children: filterData
                                })
                            }
                        }
                    })
                    return result
                }
                return loop(this.originalDepartments)
            },
            getMatchIndex(title) {
                if (!this.searchKey.value) return -1;
                return title.toLowerCase().indexOf(this.searchKey.value.toLowerCase());
            },
            onIconAddClick(dep) {
                //弹出添加部门Modal
                this.addModal.parentDep = dep
                this.addModal.open = true
            },
            onIconDelClick(dep) {
                if (dep?.children?.length > 0) {
                    this.$message.error('该部门有子部门,无法移除')
                    return
                }
                //删除数据库的内容并重新渲染
                this.delModal.dep = dep
                this.delModal.open = true
            },
            delDep() {
                this.$delete(this.requestUrl.delDepartment.url + this.delModal.dep.id).then(res => {
                    if (res) {
                        this.$message.success(res.message)
                        this.getAllDepartments()
                    }
                    this.delModal.open = false
                })
            }
        },
        mounted() {
            this.getAllDepartments()
        }
    }
</script>

<style scoped>

</style>
